<template>
  <view class="pages">
    <!-- #ifdef APP-PLUS-->
    <u-sticky offset-top="0" zIndex="10000" bgColor='#fff'>
    <!-- #endif -->
      <!-- #ifdef H5 -->
      <u-sticky offset-top="-44" zIndex="10000">
      <!-- #endif -->
        <view class="followTop">
          <view>
            <up-navbar :placeholder="true" :autoBack="true" title="个人标签"></up-navbar>
          </view>
          <view class="uSearch">
            <view class="searchBox">
              <u-search searchIcon="plus" searchIconSize="26rpx" maxlength="6" placeholder="添加个人标签" :showAction="keyword?true:false" v-model.trim="keyword"
                @search="search"  @custom="search" bgColor="#F5F6F8" :clearabled="false" @change="change" @focus="focus" actionText="添加" :focus="focu"
                 :actionStyle="{
                    color: '#00C1B9',
                    fontSize: '26rpx',
                    lineHeight: '37rpx',
                    marginRight: '35rpx',
                  }"></u-search>
            </view>   
          </view>
        </view>
      </u-sticky>
      <view class="content">
        <view class="prop mar-b-20">{{`已设置个人标签（${tagList.length}/5）`}}</view>
        <view class="tag">
          <view class="tagItem u-flex mar-b-20" v-for="(item,index) in tagList" :key="index">
            <text class="itemName mar-r-16">{{item}}</text>
             <u-icon
              name="close"
              color="#AAAAAA"
              size="15"
              @click="deleTag(item,index)"
            ></u-icon>
          </view>
         
        </view>

         <view v-if="tagList.length == 0" class="flex-column-row-start">
            <image src="https://ossresource.miyingbl.com/def/243d3202405231405385619.png" style="width:240rpx;height:200rpx;margin-top:243rpx;margin-bottom:20rpx"></image>
            <view class="empty_text mar-b-10">暂无内容</view>
            <view class="empty_text">添加个人标签，让患者更加了解你</view>
          </view>
      </view>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { doctorInfo } from '@/api/home'
  import { updateDoctorInfo } from '@/api/my'
  import { onLoad } from '@dcloudio/uni-app'
  const keyword = ref('')
  const focu = ref(false)
  const tagList = ref([])
  const search = () => {
    if(tagList.value.length<5){
			const list=tagList.value;
			for(var i in list){
				if(keyword.value==list[i]){
					uni.showToast({
						title: '请勿重复添加',
						icon: 'none'
					})
					return false;
				}
			}
      let arr = JSON.parse(JSON.stringify(tagList.value)) || []
      arr.push(keyword.value)
			if(type.value == 'open') {
				uni.$emit('updateLabel',arr)
        uni.showToast({title: '添加成功',icon: 'none'})
				tagList.value=arr
				keyword.value=''
				return false;
			}
      if(type.value == 'edit') {
        updateDoctorInfo({type:6,new_labels:arr.join(',')}).then((res) => {
          if(res.code == 200){
            tagList.value.push(keyword.value)
            uni.showToast({title: '添加成功',icon: 'none'})
            keyword.value = ''
            uni.$emit('updateUserInfo')
          }else if(res.code == 4101 || res.code == 4102) {
            return uni.showToast({
              title: res.msg,icon: 'none'
            })
          }
        })
      }
    }else{
      uni.showToast({title: '最多可添加5个个人标签',icon: 'none'})
    }
  }
  const change = () => {}
  const focus = () => {}
  const deleTag = (item:any,index:number) => {
    let arr = JSON.parse(JSON.stringify(tagList.value)) || []
    arr.splice(index,1)
		if(type.value == 'open') {
			if(arr.length ==0) {
        return uni.showToast({
          title:'至少保留一个标签',
          icon: 'none'
        })
      }else{
      	uni.$emit('updateLabel',arr)
	      uni.showToast({title: '删除成功',icon: 'none'})
				tagList.value=arr
				return false;
      }
		}
    if(type.value == 'edit'){
      if(arr.length ==0) {
        return uni.showToast({
          title:'至少保留一个标签',
          icon: 'none'
        })
      }else {
        updateDoctorInfo({type:6,new_labels:arr.join(',')}).then((res) => {
          if(res.code == 200) {
            tagList.value = arr
            uni.showToast({title: '删除成功',icon: 'none'})
            uni.$emit('updateUserInfo')
          }
        })
      }
    }
  }
  const userInfo = ref({})
  async function getDoctorInfo() {
    const res = await doctorInfo()
    tagList.value = res.data.new_labels
    userInfo.value = res.data
  }
  const type = ref('')
  onLoad((options) => {
    if(options.type == 'edit') {
      type.value = options.type
    }else if(options.type == 'open') {
      type.value = options.type
    }
		if(options.arr) {
		  	tagList.value=options.arr.split(',')||[]
		}else{
			getDoctorInfo()
		}
  })
</script>

<style lang="scss" scoped>
.pages{
  background: #F6F6F6;
  height: 100vh;
}
.followTop {
  width: 100%;
  background: #fff
}
.uSearch {
  padding: 0 24rpx 30rpx;
  width: 100%;
  display: flex;
  align-items: center;

  .searchBox {
    flex: 1;
    background: #F5F6F8;
    border-radius: 35rpx;
  }
}
.content{
  padding:20rpx 24rpx;
  .prop{
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #5C5C5C;
  }
}
.tag{
  display: flex;
  flex-wrap: wrap;
}
.tagItem{
  background: #FFFFFF;
  border-radius: 34rpx;
  padding: 10rpx 20rpx;
  min-width: 100rpx;
  margin-right: 20rpx;
  .itemName{
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #202020;
  }
}
.empty_text{
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 26rpx;
  color: #AAAAAA;
}
</style>